<template>
  <div>
    <Drawer title="快照管理"
            :width="330"
            placement="right"
            :closable="true"
            :mask-closable="true"
            :draggable="false"
            transfer
            v-model="visible"
            @on-close="cancel">

      <Button size="small" type="primary" class="m-r-5px" @click="createSnapshoot">生成新快照</Button>
      <Button size="small" type="error" @click="deletePageSnapshoot" :disabled="tableSelection.length == 0">删除</Button>
      <div class="m-b-10px"></div>

      <Table ref="table" size="small" :columns="columns" :data="tableData"
             @on-selection-change="tableSelectHandler"></Table>

    </Drawer>

    <Modal v-model="formDataModelVisible"
           width="400"
           title="快照基本信息编辑"
           :mask-closable="true"
           :ok-text="'保存'"
           @on-ok="submitForm">
      <Form :label-width="60" :model="formData">
        <FormItem label="ID" prop="id" hidden>
          <Input v-model="formData.id"/>
        </FormItem>
        <FormItem label="快照名称" prop="name">
          <Input v-model="formData.name" disabled/>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input type="textarea" :rows="4" v-model="formData.remark"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>

import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: "PageSnapshootManageDrawer",
  props: {
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: this.show,

      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '快照信息',
          key: 'name',
          render: (h, params) => {
            return h('div', {style: {margin: '5px'}}, [
              h('span', {
                style: {
                  fontSize: 13
                }
              }, params.row.name),
              params.row.enabled == '1' ? h('Icon', {
                props: {
                  type: 'md-checkmark',
                  size: 14
                },
                style: {
                  color: '#8bc34a',
                  marginLeft: '5px'
                }
              }) : undefined,
              h('br'),
              h('span', {
                style: {
                  fontSize: 12,
                  color: '#9e9e9e'
                }
              }, params.row.remark)
            ])
          }
        },
        {
          title: '操作',
          width: 60,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'md-create'
                },
                style: {
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.formData = this.$PnUtil.deepClone(params.row)
                    this.formDataModelVisible = !this.formDataModelVisible
                  }
                }
              })
            ])
          }
        }
      ],
      tableData: [],
      tableSelection: [],
      formDataModelVisible: false,
      formData: {
        id: '',
        name: '',
        remark: ''
      }
    }
  },
  mounted() {

  },
  methods: {

    init() {
      this.$PnApi.PageSnapshootApi.getPageSnapshootsByPageId(this.pageMetadata.id).then(result => {
        this.tableData = result.data.payload
        this.tableSelection = []
      })
    },

    createSnapshoot() {
      let pageSnapshootData = {
        page_id: this.pageMetadata.id,
        name: '',
        remark: '',
        layout: JSON.stringify(this.pageMetadata.layout),
        enabled: '0',
        is_lock: '0',
        theme_json: JSON.stringify(this.pageMetadata.theme_json)
      }
      this.$PnApi.PageSnapshootApi.savePageSnapshoot(pageSnapshootData).then(result => {
        if (result.data.success) {
          this.init()
        } else {
          this.$Message.error(result.data.message)
        }
      })
    },

    submitForm() {
      this.$PnApi.PageSnapshootApi.savePageSnapshoot(this.formData).then(result => {
        if (result.data.success) {
          this.init()
        } else {
          this.$Message.error(result.data.message)
        }
      })
    },

    tableSelectHandler(selection) {
      this.tableSelection = selection
    },

    deletePageSnapshoot() {
      this.$Modal.confirm({
        title: '确认',
        content: '确定删除选中的数据吗？',
        onOk: () => {
          let ids = this.$refs['table'].getSelection().map((item) => {
            return item.id
          })
          this.$PnApi.PageSnapshootApi.deletePageSnapshoot(ids).then(result => {
            this.init()
          })
        }
      });
    },

    cancel() {
      this.visible = false;
      this.$emit('cancel', this.visible)
    }
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata'
    })
  },
  watch: {
    show(val) {
      this.visible = val
      if (val) {
        this.init()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.theme-card-item {
  width: 100%;
  height: auto;
  padding: 10px;
  background-color: #eeeeee;
  box-sizing: border-box;
  border: 2px solid #757575;
  border-radius: 4px;
  margin-bottom: 10px;
  color: #424242;

  &:hover {
    border-color: #2196f3;
    box-shadow: 0px 0px 5px #000000;
  }

  &.active {
    border-color: #2196f3;
    box-shadow: 0px 0px 5px #000000;
  }

  .color-item {
    width: 48px;
    float: left;

    .color-lump {
      width: 100%;
      height: 30px;

      &.none-color {
        background-color: #fff;
        text-align: center;

        &:after {
          content: '空';
          color: #e57373;
        }
      }
    }
  }
}
</style>
